<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Browse Articles</title>
    </h:head>
    <h:body>
        <h:form id="Articlesform">  
            <p:growl id="growlForArt" showDetail="true" />  
            <p:dataTable id="articleTable" var="art" value="#{articleBean.articles}" 
                         paginator="true" rows="5"  
                         paginatorTemplate="{CurrentPageReport}  
                         {FirstPageLink} {PreviousPageLink} 
                         {PageLinks} {NextPageLink} 
                         {LastPageLink} {RowsPerPageDropdown}"  
                         rowsPerPageTemplate="5,10,15">  
                <p:column headerText="Id" >  
                    <h:outputText value="#{art.id}" />  
                </p:column>  
                <p:column headerText="Status" >  
                    <h:outputText value="#{art.status}  " />  
                </p:column>  
                <p:column headerText="Date" >  
                    <h:outputText value="#{art.date}  " />  
                </p:column>  
                <p:column headerText="Title" >  
                    <h:outputText value="#{art.title}" />  
                </p:column>
                <p:column headerText="Article Body" >  
                    <h:outputText value="#{art.articleBody}" />  
                </p:column>
                <p:column id="columnOfArticles">  
                    <h:panelGrid columns="3" styleClass="actions" cellpadding="2">  
                        <p:commandButton update="Articlesform:displayArticle" action="#{commentBean.retrieveComments()}" oncomplete="browseArticleDialog.show()" icon="ui-icon-search" title="View">  
                            <f:setPropertyActionListener value="#{art}" target="#{articleBean.selectedArticle}"/>  
                            <f:setPropertyActionListener value="#{art}" target="#{commentBean.articleForComment}"/>  
                        </p:commandButton>  
                    </h:panelGrid>  
                </p:column>  
            </p:dataTable> 

            <p:dialog id="browseArticleDialog" header="Article Details" widgetVar="browseArticleDialog" resizable="false"  
                      showEffect="explode" hideEffect="explode">   
                <h:panelGrid id="displayArticle" columns="2">  
                    <h:outputText value="Id:" />  
                    <h:outputText value="#{articleBean.selectedArticle.id}" style="font-weight:bold" /> 
                    <h:outputText value="Title:" />  
                    <h:outputText value="#{articleBean.selectedArticle.title}" style="font-weight:bold" /> 
                    <h:outputText value="Article Body:" />  
                    <h:outputText value="#{articleBean.selectedArticle.articleBody}" style="font-weight:bold"/>
                    <h:outputText value="Status:" />  
                    <h:outputText value="#{articleBean.selectedArticle.status}"  style="font-weight:bold"/>   
                    <h:outputText value="Date:" />  
                    <h:outputText value="#{articleBean.selectedArticle.date}"  style="font-weight:bold"/>   
                    <h:panelGrid id="displayComm" columns="2">
                        <p:dataTable id="commentsOnArticle" var="comm" value="#{commentBean.articleComments}" 
                                     paginator="true" rows="5"  
                                     paginatorTemplate="{CurrentPageReport}  
                                     {FirstPageLink} {PreviousPageLink} 
                                     {PageLinks} {NextPageLink} 
                                     {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15"> 
                            <p:column headerText="Comment Body" >  
                                <h:outputText value="#{comm.commentBody}" />  
                            </p:column>
                            <p:column headerText="Comment by" >  
                                <h:outputText value="#{comm.registeredUserId.username}" />  
                            </p:column>
                        </p:dataTable> 
                    </h:panelGrid>
                </h:panelGrid>            
            </p:dialog>
        </h:form>  
    </h:body>  
</html>
